<cd-modal [modalRef]="activeModal">
  <ng-container i18n="form title"
                class="modal-title">{{ action | titlecase }} {{ groupType | upperFirst }} Flow</ng-container>

    <ng-container class="modal-content">
      <form name="flowForm"
            #frm="ngForm"
            [formGroup]="currentFormGroupContext"
            novalidate>
        <div class="modal-body">
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="flow_id"
                   i18n>Name</label>
            <div class="cd-col-form-input">
              <input class="form-control"
                     type="text"
                     placeholder="Flow Name..."
                     id="flow_id"
                     name="flow_id"
                     formControlName="flow_id"/>
            </div>
          </div>
          <div class="form-group row">
            <label class="cd-col-form-label"
                   for="bucket"
                   i18n>Bucket Name</label>
            <div class="cd-col-form-input">
              <input id="bucket"
                     name="bucket"
                     class="form-control"
                     type="text"
                     i18n-placeholder
                     placeholder="Bucket Name..."
                     formControlName="bucket_name"/>
              <span class="invalid-feedback"
                    *ngIf="currentFormGroupContext.showError('bucket_name', frm, 'bucketNameNotAllowed')"
                    i18n>The bucket with chosen name does not exist.</span>
            </div>
          </div>
          <ng-container *ngIf="groupType == flowType.symmetrical; else directionalFlow">
            <div class="form-group row">
              <label class="cd-col-form-label required"
                     for="zones">
                <ng-container i18n>Zones</ng-container>
                <cd-helper>
                  <span i18n>Flow need to be associated with atleast one zone</span>
                </cd-helper>
              </label>
              <div class="cd-col-form-input">
                <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'zones', zone: zones }"></ng-container>
              </div>
            </div>
          </ng-container>
          <ng-template #directionalFlow>
            <div class="form-group row">
              <label class="cd-col-form-label required"
                     for="source_zone"
                     i18n>Source Zone
              </label>
              <div class="cd-col-form-input">
                <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'source_zone', zone: sourceZones }"></ng-container>
              </div>
            </div>
            <div class="form-group row">
              <label class="cd-col-form-label required"
                     for="destination_zone"
                     i18n>Destination Zone</label>
              <div class="cd-col-form-input">
                <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'destination_zone', zone: destinationZones }"></ng-container>
              </div>
            </div>
          </ng-template>
        </div>
        <div class="modal-footer">
          <cd-form-button-panel (submitActionEvent)="submit()"
                                [form]="currentFormGroupContext"
                                [submitText]="(action | titlecase) + ' ' + (groupType | upperFirst) + ' ' + 'Flow'"></cd-form-button-panel>
        </div>
      </form>
    </ng-container>
  </cd-modal>

<ng-template #zoneMultiSelect
             let-name="name"
             let-zone="zone">
  <cd-select-badges [id]="name"
                    [name]="name"
                    [customBadges]="zone.customBadges"
                    [customBadgeValidators]="zone.data.validators"
                    [messages]="zone.data.messages"
                    [data]="zone.data.selected"
                    [options]="zone.data.available"
                    (selection)="zoneSelection()">
  </cd-select-badges>
  <i *ngIf="zone.data.selected.length <= 0"
     i18n-title
     title="Flow should be associated with {{name?.split('_').join(' ')}}"
     class="{{ icons.warning }} icon-warning-color">
  </i>
  <span class="invalid-feedback"
        *ngIf="currentFormGroupContext.showError(name, frm, 'required')"
        i18n>{{name?.split('_').join(' ')}} selection is required!
  </span>
</ng-template>
